<template>
	<view class="search_box">
		<view class="search_top across" >
			<view class="left">
				<view class="city_box">
					<view>
					 <picker @change="bindPickerChange"  :value="region" mode = 'region'>
					                        <view class="uni-input">{{city}}</view>
					                    </picker>
					</view>
					<image src="../../../static/images/icon_bottom.png"></image>
				</view>
				<view class="search_top_center across">
						<image  src='../../../static/images/icon-search.png'></image>
					<input type="text" :value="keyword" @input='setKeyword' placeholder="请输入市场名称搜索" />
				</view>
				<view class="search_btn" @click="clickBtn">搜索</view>
			</view>
		</view>
<!-- 		<view class="locat_box">
			<view class="label">自动定位
			</view>
			<view class="sure_box">高桥市场</view>
		</view> -->
		<view class="search_history" v-if="isShowHistory">
			<view class="label">历史访问</view>
			<view class="history_list">
				<view class="history_item" v-for="(item,index) in list" @click="setvaluekeyword(index)">
						{{item}}
				</view>
			</view>
		</view>
		<view class="info_list">
			<view class="info_item" v-for="(item,index) in info_list" @click="selectArea(index)">
				<view class="left">{{item.name}}</view>
				<view class="right">{{item.distance}}</view>
			</view>
		</view>
		<view class="none_box" v-if='isShowNone'>
			没有找到搜索信息!
		</view>
	</view>
</template>

<script>
	import avatar from '../../../components/avatar.vue'
	import complanit from '../../../components/complaint.vue'
	export default {
		data() {
			return {
				list: [
				],
				discover:[
					'海底捞',
					'笨萝卜',
					'突击龙虾',
					'麻辣烫',
					'盐焗鸡爪'
				],
				allList:[
					'花鸟市场',
					'菜市场',
					'生鲜市场'
				],
				statusBar:0,
				customBar:0,
				keyword: '',
				page:1,
				index:1,
				info_list:[],
				currentId: '',
				isShowNone:false,
				isShowHistory: true,
				location:'',
				city:'长沙',
				sheng: '湖南省',
				region:['湖南省','长沙市']
			}
		},
		components:{
			avatar,
			complanit
		},
		mounted(){
			uni.getStorage({
				key:'area_list',
				success:res=>{
					console.log(res)
					this.list = res.data
				}
			})
			this.location = this.$store.getters.getLocation
			console.log(this.location)
		},
		methods: {
			setKeyword(e){
				console.log(e)
				this.keyword = e.detail.value
				console.log('觸發')
				
			},
			selectArea(index){
				let location = this.info_list[index].location,
					area = {
						latitude:location.lat,
						longitude:location.lng
					}
					
				this.$store.commit('setLocation',area)
				uni.navigateBack({
					delta:1
				})
			},
			deleteHisList(index){
				this.list.splice(index,1); 
				if(this.list.length == 0){
					this.isShowHistory = false
				}
			},
			navShop(index){
				uni.navigateTo({
					url:'../home/personage/personage?userId='+this.list[index].shop_id
				})
			},
			setvaluekeyword(index){
				this.keyword = this.list[index]
				this.btnSearch()
				uni.showLoading({
					// title:'请求中'
				})
			},
			clickBtn(){
					this.info_list  = []
					this.btnSearch()
			},
			btnSearch(){
				this.isShowHistory = false
				if(page == 1){
					this.info_list  = []
				}
				let keyword = this.keyword
				let page = this.page
				if(keyword != '' && this.list.indexOf(keyword) == -1){
					this.list.push(keyword)
					if(this.list.length >=6){
						this.shift()
					}
				}
				this.$http.geturlAddress({
					region_address:keyword,
					latitude:this.location.latitude,
					longitude:this.location.longitude,
					region:this.city,
					page
				}).then(res=>{
					console.log(res)
					this.info_list = this.info_list.concat(res.data.result)
					if(page == 1 & this.info_list.length == 0){
						this.isShowNone = true
					}else{
						this.isShowNone = false
					}
					this.page++
					uni.setStorage({
						key: 'area_list',
						data:this.list
					})
				})
			},
			openplanit(index){
				  this.currentId = this.info_list[index].id
				  this.$refs.complanit.open()
			},
			bindPickerChange(e){
				console.log(e)
				this.sheng = e.detail.value[0],
				this.city = e.detail.value[1]
			},
			navBack(){
				uni.setStorage({
					key: 'area_list',
					data:this.list
				})
				uni.navigateBack({
					delta:1
				})
			}
		},
		onHide() {
			uni.setStorage({
				key: 'area_list',
				data:this.list
			})
		}
	}
</script>

<style lang="less">
	.search_box{
		height: 100vh;
		flex: 1;
		width: 100vw;
		overflow: scroll;
		background: #000;
		.label{
			color: #fff;
			font-size: 24rpx;
		}
	}
	.city_box{
		color: #fff;
		min-width: 18vw;
		position: relative;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.uni-input{
			white-space: nowrap;
		}
		image{
			width: 24rpx;
			height: 14rpx;
		}
	}
	.locat_box{
		width: 94vw;
		margin-left: 3vw;
		border-bottom: 1px solid #333333;
		margin-top: 15rpx;
		padding-bottom: 30rpx;
		.sure_box{
			margin: 10rpx 0vw;
			background-color: #242730;
			border-radius: 5rpx;
			max-width: 42vw;
			text-align: center;
			color: #fff;
			height: 60rpx;
			line-height: 60rpx;
			margin-right: 2vw;
		}
	}
	.across{
		display: flex;
	}
	.vertical{
		display: flex;
		flex-direction: column;
	}
	.none_box{
		width: 100vw;
		height: 30vh;
		line-height: 30vh;
		text-align: center;
		color: #fff;
		font-size: 40rpx;
	}
	.more_btn{
		width: 74rpx;
		height: 74rpx;
		// background-color: #242730;
		border-radius: 10rpx;
		image{
			margin-left: 15rpx;
			margin-top: 33rpx;
			width: 44rpx;
			height: 8rpx;
		}
	}
	.search_top{
		width: 100vw;
		z-index: 9;
		align-items: center;
		// width: 65vw;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		padding: 0rpx 4vw;
		// position: fixed;
		background-color: #000000;
		.left{
			display: flex;
			justify-content: space-between;
			align-items: center;
			// width: 65vw;
		}
		.back{
			width: 20rpx;
			height: 34rpx;
			// margin-left: 10rpx;
		}
		.search_top_center{
			margin-left: 2vw;
			width: 55vw;
			height: 60rpx;
			background-color: #4D4D4D;
			align-items: center;
			padding: 0 10rpx;
			border-radius: 10rpx;
			.back_box{
				flex: 1;
			}
			image{
					width: 32rpx;
					z-index: 10;
					height: 32rpx;
			}
			input{
				flex: 1;
				margin-left: 15rpx;
				color: #fff;
			}
		}
		.search_btn{
			font-size: 30rpx;
			color: #ffffff;
			width: 12vw;
			margin: 0 0 0 4vw;
			text-align: center;
		}
	}
	.search_history{
		margin-top: 20rpx;
		width: 92vw;
		padding-bottom: 20rpx;
		margin-left: 4vw;
		border-bottom: 1px solid #333333;
		.history_list{
			display: flex;
			flex-wrap: wrap;
			.history_item{
				justify-content: space-between;
				margin: 10rpx 0vw;
				align-items: center;
				background-color: #242730;
				border-radius: 5rpx;
				min-width: 28vw;
				text-align: center;
				color: #fff;
				height: 60rpx;
				line-height: 60rpx;
				margin-right: 2vw;
			}
		}

		
	
	}
	.info_list{
		width: 94vw;
		margin: 20rpx 3vw;
		.info_item{
			// margin-top: 30rpx;
			font-size: 30rpx;
			color: #ffffff;
			display: flex;
			justify-content: space-between;
			view{
				font-size: 30rpx;
				line-height: 88rpx;
				height: 88rpx;
			}
		}
	}

</style>
